﻿<!DOCTYPE html>
<html>
<head>
    <title>Lava:  To Do</title>
    <link href='http://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
    <link href="../css/demos.css" rel="stylesheet" />
    <link href="../css/todo.css" rel="stylesheet" />
    <script src="../scripts/lava.js"></script>
    <script type="text/javascript">
        var Todo = Lava.Object({
            complete: false,
            task: null,
            visible: true
        });

        var currentTodo = Todo.clone();

        var TodoController = Lava.Controller({
            todos: [],
            add: function (e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode === 13 && (currentTodo.task || '').length > 0) {
                    var route = Lava.Routes.getCurrent();
                    if(route && route.name === 'Completed')
                        TodoController.todos.addAt(0, Todo.clone({ task: currentTodo.task, visible: false }));
                    else
                        TodoController.todos.addAt(0, Todo.clone({ task: currentTodo.task }));
                    currentTodo.task = null;
                    var $this = (e.target || e.srcElement);
                    $this.focus();
                    setTimeout(function () { $this.focus(); }, 10);
                    TodoController.remaining.trigger();
                }
            },
            remove: function (e, args) {
                TodoController.todos.remove(args.item);
                TodoController.remaining.trigger();
            },
            toggleCompleteAll: function (e) {
                var self = e.target || e.srcElement;
                // turn off the computed property while we do the mass edit
                TodoController.remaining.on = false;
                TodoController.todos.forEach(function (element) {
                    element.complete = self.checked ? true : false;
                });
                TodoController.remaining.on = true;
                TodoController.remaining.trigger();
            },
            clearCompleted: function () {
                for (var a = 0; a < TodoController.todos.length; a++) {
                    var element = TodoController.todos[a];
                    if(element.complete) {
                        TodoController.todos.remove(element);
                        a--;
                    }
                }
                TodoController.remaining.trigger();
            },
            remaining: Lava.Computed('TodoController.todos[@each].complete', function () {
                var count = 0;
                TodoController.todos.forEach(function (item) {
                    count += item.complete ? 0 : 1;
                });
                filterTodos();
                return count;
            })
        });

        Lava.Routes.add('All', function () {
            filterTodos();
        });
        Lava.Routes.add('Active', function () {
            filterTodos();
        });
        Lava.Routes.add('Completed', function () {
            filterTodos();
        });

        var filterTodos = function () {
            var route = Lava.Routes.getCurrent();
            if(!route) return;
            var view = route.name;

            if(view === 'All') {
                TodoController.todos.forEach(function  (item) {
                    item.visible = true;
                });
            }
            else if (view === 'Active') {
                TodoController.todos.forEach(function  (item) {
                    item.visible = item.complete ? false : true;
                });
            }
            else if (view === 'Completed') {
                TodoController.todos.forEach(function  (item) {
                    item.visible = item.complete ? true : false;
                });
            }
        };
    </script>
</head>
<body>
    <div class="centered-content">
        <h1 id="header">Todos</h1>
        <div style="clear:both;height:20px"></div>
        <div>
            <input type="text" data-bind="{value: currentTodo.task, keypress: TodoController.add}" placeholder="What needs to be done?" />
            <div style="clear:both;height:5px"></div>
            <span data-bind="{text: {bind: TodoController.remaining, format: 'remaining tasks: {0}'}}" style="float:left;color:#6688AA"></span>
            <button class="gray" style="float:right" data-bind="{click: TodoController.clearCompleted}">clear completed</button>
        </div>
        <div style="clear:both;height:10px"></div>
        <input type="checkbox" data-bind="{change: TodoController.toggleCompleteAll}" style="margin-left:5px" /><label style="color:#000099">  Select All</label>
        <div style="float:right">
            <a href="#All">All</a>
            <a href="#Active">Active</a>
            <a href="#Completed">Completed</a>
        </div>
        <div style="clear:both;height:5px;border-bottom:1px solid #EEE"></div>
        <ul data-bind="{foreach: TodoController.todos}">
            <li class="todo" data-template="{if: [i].visible}">
                <input type="checkbox" data-template="{checked: [i].complete}" />
                <span data-template="{if: [i].complete, text: [i].task}" class="complete"></span>
                <span data-template="{ifnot: [i].complete, text: [i].task}"></span>
                <button data-template="{click: {bind: TodoController.remove, args: {item: [i]}}}" class="red">x</button>
            </li>
        </ul>
    </div>
</body>
</html>